/**
 * Clase que permite llamar a highchart en un modal
 * @author Mauricio Chamorro <mrchamorro@utn.edu.ec>
 */
var chart;
var nombre;
var meses;
var fechaMes;
var totalTalla = 0;
var totalPeso = 0;
var f;
$(function() {
    meses = new Array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre");

    f = new Date();
    /**
     * Creacion del chartTallaPie
     */
    chartTalla = new Highcharts.Chart({
//        width: 'auto',
//        heigth: 'inherit',
        chart: {
            renderTo: 'reporPieTalla',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
        },
        tooltip: {
//            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>',
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.percentage:.1f} %</b> ',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                },
                showInLegend: true
            }
        },
        title: {
            text: 'Población por talla', // título
        },
        subtitle: {
            text: meses[f.getMonth()] + " " + f.getFullYear(), // título
        },
        legend: {
            labelFormat: '{name} ({y})',
            navigation: {
                activeColor: '#3E576F',
                animation: true,
                arrowSize: 12,
                inactiveColor: '#CCC',
                style: {
                    fontWeight: 'bold',
                    color: '#333',
                    fontSize: '12px'
                }
            }
        },
        series: []
    });
    /**
     * Creacion del chartTallaPie
     */
    chartPeso = new Highcharts.Chart({
//        width: 'auto',
//        heigth: 'inherit',
        chart: {
            renderTo: 'reporPiePeso',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
        },
        tooltip: {
//            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>',
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.percentage:.1f} %</b> ',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                },
                showInLegend: true
            }
        },
        title: {
            text: 'Población por peso', // título
        },
        subtitle: {
            text: meses[f.getMonth()] + " " + f.getFullYear(), // título
        },
        legend: {
            labelFormat: '{name} ({y})',
            navigation: {
                activeColor: '#3E576F',
                animation: true,
                arrowSize: 12,
                inactiveColor: '#CCC',
                style: {
                    fontWeight: 'bold',
                    color: '#333',
                    fontSize: '12px'
                }
            }
        },
        series: []
    });

});

function obtenerNombreInstitucion() {
    $.getJSON(baseUrl + 'ninio/institucion/getDataInstitucion/id/' + $('#institucion').val(), function(data) {
    }).done(function(data) {
        nombre = data.nombre;
        chartTalla.setTitle(null, {text: nombre + ", " + meses[parseInt(fechaMes.substring(fechaMes.length - 2, fechaMes.length)) - 1] + " " + f.getFullYear() + " - Total: " + totalTalla});
        chartPeso.setTitle(null, {text: nombre + ", " + meses[parseInt(fechaMes.substring(fechaMes.length - 2, fechaMes.length)) - 1] + " " + f.getFullYear() + " - Total: " + totalPeso});
    });
}

/**
 * Permite realizar el llamado al controlador para luego proceder a crear la grafica y la tabla de menus
 * @author Mauricio Chamorro 
 * @param {int} id
 */
var booleanActivoChart = false;
/**
 * 
 * @returns {undefined}
 */
function loadGrafica() {
    var id = $('#institucion').val();
    fechaMes = $("#fecha_mes").val();
    if (fechaMes == '' || id == '' || id == null || fechaMes == null) {
//        openModal("mainModal", "<center><h1>Datos inválidos</h1></center>", "Seleccione una institución y/o mes");
        bootbox.alert("Seleccione una institución y/o mes");
    }
    else {
        $.ajax({
            beforeSend: function() {
                verCargandoDatosModal();
            },
            type: "Get", //GET or POST or PUT or DELETE verb
            url: baseUrl + 'ninio/datosAntropomorficos/ajaxGetSeriesPie',
            data: {id: id, fechaMes: fechaMes}, //Data sent to server
            dataType: "json"})
                .success(function(data) {//On Successful service call
                    totalTalla = 0;
                    totalPeso = 0;
                    obtenerNombreInstitucion();
                    if (booleanActivoChart) {
                        chartTalla.series[0].remove(false);
                        chartPeso.series[0].remove(false);
                    }
                    chartTalla.addSeries(data.body.dataTalla.series, false);
                    console.log(data.body.dataTalla.series.data);
                    for (var i = 0, len = data.body.dataTalla.series.data.length; i < len; i++) {
                        totalTalla += (data.body.dataTalla.series.data[i][1])
                    }
                    for (var i = 0, len = data.body.dataTalla.series.data.length; i < len; i++) {
                        totalPeso += (data.body.dataTalla.series.data[i][1])
                    }
                    chartPeso.addSeries(data.body.dataPeso.series, false);
                    booleanActivoChart = true;
                    chartTalla.redraw();
                    chartPeso.redraw();
                    cerrarCargandoDatosModal();
                })
                .
                error(function(xhr) {//On Successful service call
                    openModal("mainModal", xhr.status + " " + xhr.statusText, xhr.responseText);
                }
                ).complete(function() {
            $(window).resize();

        });
    }

}
